<template>
    <div class="container columns is-fluid">
        <div class="column is-3">
            <x-menu>
                <x-menu-group>
                    <x-menu-item>
                        <x-menu-group label="Basic">
                            <x-menu-item>
                                <router-link to="/button">button</router-link>
                            </x-menu-item>
                        </x-menu-group>
                        <x-menu-group label="Form">
                            <x-menu-item>
                                <router-link to="/radio">radio</router-link>
                                <router-link to="/checkbox">checkbox</router-link>
                            </x-menu-item>
                        </x-menu-group>
                        <x-menu-group label="Data">
                            <x-menu-item>
                                <router-link to="/table">table</router-link>
                            </x-menu-item>
                        </x-menu-group>
                        <x-menu-group label="Others">
                            <x-menu-item>
                                <router-link to="/modal">modal</router-link>
                            </x-menu-item>
                        </x-menu-group>

                    </x-menu-item>
                </x-menu-group>
            </x-menu>
        </div>
        <div class="column is-9">
            <router-view/>
        </div>
    </div>
</template>